<!--
 * @Author: 89-83-77
 * @Description: 请填写当前文件简介
 * @Date: 2025-03-27 17:01:29
 * @LastEditTime: 2025-03-29 14:26:15
 * @FilePath: \fz-yzt-webd:\work\client\src\views\system\User.vue
-->
<template>
    <div class="user-management">
        <el-card>
            <template #header>
                <div class="toolbar">
                    <el-button type="primary" @click="handleAdd">新增用户</el-button>
                    <el-input v-model="searchKey" placeholder="搜索用户" style="width: 200px; margin-left: auto"
                        clearable />
                </div>
            </template>

            <el-table :data="filteredUsers" border>
                <el-table-column prop="username" label="用户名" />
                <el-table-column prop="role" label="角色" />
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column label="操作" width="180">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination class="pagination" :page-size="pageSize" layout="total, prev, pager, next" :total="total" />
        </el-card>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue'

// 模拟数据
const users = ref([
    { id: 1, username: 'admin', role: '管理员', createTime: '2023-01-01' },
    { id: 2, username: 'user1', role: '普通用户', createTime: '2023-02-15' }
])

const searchKey = ref('')
const pageSize = 10
const total = computed(() => users.value.length)

const filteredUsers = computed(() => {
    return users.value.filter(user =>
        user.username.includes(searchKey.value))
})
</script>